import {CCard} from '@/components/card'
import {DeviceStatusOfStatus, IconImg} from '@/components/image'
import {CnBoldSpan, CnMediumSpan, CnNormalP, CnNormalSpan} from '@/components/text'
import {PropType} from 'vue'
import {SplitLine} from '@/components/splitLine'
import {CFormModal, ChangeVisible} from '@/components/modal'
import DataCollectionConfigModal from '@/components/form/dataCollectionConfigModal'
import {uSetUpLoadSwitch} from '@/api/dataCollection'

const CollectionDevCard = defineComponent({
  props: {
    collectionDetail: {
      type: Object as PropType<DataCollection.CollectionDetail>,
      required: true
    }
  },
  setup(props) {
    const state = reactive<{
      dataCollectionConfigModalVisible: boolean
      switch: IsOpen
    }>({
      dataCollectionConfigModalVisible: false,
      switch: '1'
    })

    function changeSwitch() {
      uSetUpLoadSwitch({
        devId: props.collectionDetail.devId,
        isOpen: state.switch === '0' ? '1' : '0'
      })
        .then(() => {
          // emit
        })
        .catch(() => {})
    }

    return () => (
      <CCard
        vein={true}
        class='h-288 col-span-1 w-full rounded-4 bg-white overflow-hidden flex flex-col px-0 pb-52'
        title={`数据采集-${props.collectionDetail.devName}`}
        v-slots={{
          title: () => (
            <div class='w-full h-full flex justify-between items-center'>
              <CnBoldSpan>{props.collectionDetail.devName || '无设备名称'}</CnBoldSpan>
              <DeviceStatusOfStatus status={props.collectionDetail.devStatusCode}>
                <CnBoldSpan class='text-16'>{props.collectionDetail.devStatus}</CnBoldSpan>
              </DeviceStatusOfStatus>
            </div>
          )
        }}
      >
        <div class='mt-13  px-20 py-11 flex space-x-52'>
          <CnMediumSpan class='flex justify-center items-center'>采集指标</CnMediumSpan>
          <div class='flex-1 flex items-center flex-wrap space-x-24'>
            {props.collectionDetail.paramList.map(item => (
              <CnNormalSpan>{item}</CnNormalSpan>
            ))}
          </div>
        </div>
        <div class='px-20 py-11 flex space-x-52'>
          <CnMediumSpan class='flex justify-center'>采集频率</CnMediumSpan>
          <CnNormalP>
            {(props.collectionDetail.devCollectRate ?? null) === null
              ? '未设置采集频率'
              : `${props.collectionDetail.devCollectRate}分钟/次`}
          </CnNormalP>
        </div>
        {/* <div class='px-20 py-11 flex space-x-52'>
          <CnMediumSpan class='flex justify-center'>
            采集开关
          </CnMediumSpan>
          <div class=''>
            <a-switch
              checkedChildren='已开启'
              checkedValue={1}
              unCheckedChildren='已关闭'
              unCheckedValue={0}
            ></a-switch>
          </div>
        </div> */}
        <div
          class='absolute bottom-0 left-0 w-full h-52 flex justify-between items-center'
          style={{
            background: '#E4EAF5'
          }}
        >
          <div class='flex-1 flex justify-center items-center cursor-pointer'>
            <IconImg imgName='switch-blue' class='w-24 h-24 mr-12'></IconImg>
            <a-switch
              checked={state.switch}
              checkedChildren='已开启'
              checkedValue={'1'}
              unCheckedChildren='已关闭'
              unCheckedValue={'0'}
              onChange={() => changeSwitch()}
            ></a-switch>
          </div>

          <SplitLine class='py-13'></SplitLine>

          <div
            class='flex-1 flex justify-center items-center cursor-pointer'
            onClick={() => {
              state.dataCollectionConfigModalVisible = true
            }}
          >
            <IconImg imgName='edit-content' class='w-24 h-24 mr-12'></IconImg>
            <CnMediumSpan class='text-xText'>修改频率</CnMediumSpan>
          </div>
        </div>

        <CFormModal
          v-model={[state.dataCollectionConfigModalVisible, 'visible']}
          title={`修改采集频率`}
        >
          {{
            default: (changeVisible: ChangeVisible) => (
              <DataCollectionConfigModal
                devId={props.collectionDetail.devId}
                devInfo={props.collectionDetail}
                changeVisible={changeVisible}
              ></DataCollectionConfigModal>
            )
          }}
        </CFormModal>
      </CCard>
    )
  }
})

export default CollectionDevCard
